<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=utf-8" language="java" %>
<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>用户填写问卷</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_289760_kjgrg5zwme9g4x6r.css">
    <link rel="stylesheet" href="lib/bootstrap-3.3.7/dist/css/bootstrap.css">
    <link rel="stylesheet" href="<c:url value="/css/bootstrap.min.css"/>">
    <link rel="stylesheet" href="css/public.css">
    <link href="<c:url value="/css/style3.css"/>" rel="stylesheet"/>
    <script src="lib/jquery/jquery-3.2.1.min.js"></script>
    <script src="lib/bootstrap-3.3.7/dist/js/bootstrap.js"></script>
    <script src="<c:url value="/js/chart.min.js"/>"></script>

</head>
<body>
<div class="container">
    <c:if test="${questionnaire.status == 1}">
        <div class="main">
            <div class="suv-title">
                <p class="suvTitle">问卷：<c:out value="${questionnaire.title}"/>  统计结果</p>
            </div>
            <div class="text-group">
                <input type="text" id="answerNum" hidden value="${answerCount}">
<%--                <c:forEach var="answer" items="${answerMap}">--%>
<%--                    <input type="text" id="data1" hidden value="${answer.value}">--%>
<%--&lt;%&ndash;                    <c:out value="${answer.key}"/>&ndash;%&gt;--%>
<%--&lt;%&ndash;                    <c:out value="${answer.value}"/>&ndash;%&gt;--%>
<%--                </c:forEach>--%>
                    <c:forEach var="question" items="${questionList}">
                    <c:if test="${question.type eq 'SChoice'}">
                    <div class="radio-group">
                        <p> <c:out value="${question.questionNum}"/>. <c:out value="${question.content}"/></p>
                        <c:forEach var="answer" items="${answerMap}">
                            <c:if test="${answer.key == question.questionNum}">
                                <input type="text" id="data${answer.key}" hidden value="${answer.value}">
                                <div class="col-md-4">
                                    <div class="card border-0 shadow-sm">
                                        <div class="card-body">
                                            <canvas id="chart-S${answer.key}" height="20" width="20"></canvas>
                                        <script>
                                            var data3 = document.getElementById("data${answer.key}").value;
                                            var str = data3.substring(1, data3.length - 1);
                                            console.log(str);
                                            var arr = str.split(", ");
                                            console.log(arr);
                                            var fruits = new Map();
                                            for (let i = 0; i < arr.length; i++) {
                                                var arr1 = arr[i].split("=");
                                                fruits.set(arr1[0], arr1[1]);
                                            }
                                            console.log(fruits);
                                            for (let i = 0; i < fruits.size; i++) {
                                                var arr2 = Array.from(fruits.keys()) ;
                                                console.log(arr2);
                                                var arr3 = Array.from(fruits.values());
                                                console.log(arr3);
                                            }
                                            var arr4 = [
                                                '#0a3dbf',
                                                '#e84141',
                                                '#44a246',
                                                '#FFA500',
                                                '#800080',
                                                '#FFC0CB',
                                                '#48D1CC',
                                                '#FFD700',
                                                '#FF6347',
                                                '#FF00FF',
                                            ];
                                            var arr5 = [];
                                            for (let i = 0; i < fruits.size; i++) {
                                                arr5[i] = arr4[i];
                                            }
                                            new Chart(document.getElementById('chart-S${answer.key}').getContext('2d'), {
                                                type: 'doughnut',
                                                data: {
                                                    labels: arr2,
                                                    datasets: [{
                                                        label: 'Dataset 1',
                                                        data: arr3,
                                                        backgroundColor: arr5,
                                                        hoverOffset: 4
                                                    }]
                                                },
                                                options: {
                                                    responsive: true,
                                                    plugins: {
                                                        legend: {
                                                            position: 'top',
                                                        },
                                                        title: {
                                                            display: true,
                                                            text: '统计结果'
                                                        }
                                                    }
                                                }
                                            });
                                        </script>
                                        </div>
                                    </div>
                                </div>
                            </c:if>
                        </c:forEach>
                        <c:forEach var="option" items="${optionList}">
                            <c:if test="${option.questionId == question.questionId}">
                            <div class="radio">
<%--                                <input type="radio" id="radio-1" name="radio1" value="${question.questionId}/${option.content}">--%>
<%--                                <c:out value="${option.content}"/>--%>
                            </div>
                            </c:if>
                        </c:forEach>

                    </div>
                    </c:if>


                    <c:if test="${question.type eq 'Blank'}">
                    <p> <c:out value="${question.questionNum}"/>. <c:out value="${question.content}"/></p>

                        <c:forEach var="mao" items="${map}">
                            <c:if test="${mao.key == question.questionId}">
                            <c:forEach var="map1" items="${mao.value}">
                                <c:out value="${map1}"/><br>
                            </c:forEach>
                            </c:if>
                        </c:forEach>
                    </c:if>


                    <c:if test="${question.type eq 'MChoice'}">
                    <div class="checkbox-group">
                        <p> <c:out value="${question.questionNum}"/>. <c:out value="${question.content}"/></p>
                        <c:forEach var="answer" items="${answerMap}">
                            <c:if test="${answer.key == question.questionNum}">
                                <input type="text" id="data${answer.key}" hidden value="${answer.value}">
                                <div class="col-md-4">
                                    <div class="card border-0 shadow-sm">
                                        <div class="card-body">
                                            <canvas id="chart-S${answer.key}" height="20" width="20"></canvas>
                                            <script>
                                                var data3 = document.getElementById("data${answer.key}").value;
                                                var str = data3.substring(1, data3.length - 1);
                                                console.log(str);
                                                var arr = str.split(", ");
                                                console.log(arr);
                                                var fruits = new Map();
                                                for (let i = 0; i < arr.length; i++) {
                                                    var arr1 = arr[i].split("=");
                                                    fruits.set(arr1[0], arr1[1]);
                                                }
                                                console.log(fruits);
                                                for (let i = 0; i < fruits.size; i++) {
                                                    var arr2 = Array.from(fruits.keys()) ;
                                                    console.log(arr2);
                                                    var arr3 = Array.from(fruits.values());
                                                    console.log(arr3);
                                                }
                                                var arr4 = [
                                                    '#0a3dbf',
                                                    '#e84141',
                                                    '#44a246',
                                                    '#FFA500',
                                                    '#800080',
                                                    '#FFC0CB',
                                                    '#48D1CC',
                                                    '#FFD700',
                                                    '#FF6347',
                                                    '#FF00FF',
                                                ];
                                                var arr5 = [];
                                                for (let i = 0; i < fruits.size; i++) {
                                                    arr5[i] = arr4[i];
                                                }
                                                new Chart(document.getElementById('chart-S${answer.key}').getContext('2d'), {
                                                    type: 'bar',
                                                    data: {
                                                        labels: arr2,
                                                        datasets: [{
                                                            label: '',
                                                            data: arr3,
                                                            backgroundColor: arr5,
                                                            hoverOffset: 4
                                                        }]
                                                    },
                                                    options: {
                                                        responsive: true,
                                                        plugins: {
                                                            legend: {
                                                                position: 'top',
                                                            },
                                                            title: {
                                                                display: true,
                                                                text: '统计结果'
                                                            }
                                                        }
                                                    }
                                                });
                                            </script>
                                        </div>
                                    </div>
                                </div>
                            </c:if>
                        </c:forEach>
                        <c:forEach var="option" items="${optionList}">
                            <c:if test="${option.questionId == question.questionId}">
                            <div class="checkbox">
                               <c:out value="${option.content}"/>
                            </div>
                            </c:if>
                        </c:forEach>
                    </div>
                    </c:if>
                    </c:forEach>
            </div>

        </div>
    </c:if>
    <c:if test="${questionnaire.status != 1}">
        <div class="main">
            <div class="suv-title">
                <p class="welcome">该问卷尚未编辑完成或审核未通过或还未审核</p>
            </div>
        </div>>
    </c:if>>
</div>
<div class="main-show-mb">
    <div class="tips">
        您已完成本次问卷，感谢您的帮助与支持
    </div>
</div>

<%--<script src="<c:url value="/js/questionnairereSultChart.js"/>"></script>--%>
</body>
</html>